<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="main" v-clock>
        <div v-for="(item,index) in list" class="lis">
            <div v-if="item.data>0">
                <img width="300" :src="item.image" alt="" srcset="">
                <div>{{item.name}}---{{item.price}}</div>
                <div>库存：{{item.data}}</div>
                <input type="text" v-model="list[index].data1">
                <input type="button" value="购买" @click="getdata(item.id,list[index].data1)">
            </div>
        </div>
    </div>
    <!-- 在原有作业基础上,使用list遍历商品,每个商品初始为100个商品数量,给个input输入,输入1 对应的商品数据要 -1,如果剩余数量为0，不展示 -->
    <script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
  <script>
     Vue.createApp({
        data(){
            return{
                list:[
                    {id:0,data:100,data1:null,price:5000,name:"华为手机",image:"https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/pdp/phones/mate-x3/img/kv/rtb-7@2x.webp"},
                    {id:1,data:100,data1:null,price:8000,name:"小米手机",image:"https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1672220460.25837153.png"},
                    {id:2,data:100,data1:null,price:4000,name:"荣耀手机",image:"https://hshop.honorfile.com/pimages//pages/picImages/18677980608618977681.jpg"}
                ]
            }
        },
        methods:{
            getdata(id,data){
                this.list[id].data-=data
            }
        }
     }).mount("#main")
    </script>
</body>
</html>